import React from 'react';
import { Modal, Form, Row, Col, Input } from 'antd';
import { FormInstance } from 'antd/es/form/Form';
import { FormModalProps } from '@/types/global';
import { ParamItem } from '@/types/param';
import { formLayout, modalFormItemLayout, maxModalFormItemLayout } from '@/utils/commons';
// import styles from './list.less';

type AddParamProps<T> = FormModalProps<T> & {
}
type AddParamPropsEx<T> = Omit<AddParamProps<T>, 'formData'>;

const FormItem = Form.Item;

/**
 * 新增参数弹窗表单
 */
const AddParamModal: React.FC<AddParamPropsEx<ParamItem>> = (props) => {
  // useForm 是 React Hooks 的实现，只能用于函数组件
  // formRef = Form.useForm;
  const formRef = React.createRef<FormInstance>();

  const onOk = () => {
    // console.log(formRef);
    formRef.current!.validateFields().then(fieldsValue => {
      console.info(fieldsValue);
      const values = {
        ...fieldsValue
      };
      console.log('Received values of form: ', values);
      const { onHandlerOK } = props;
      if (onHandlerOK) {
        onHandlerOK({
          ...values
        });
      }
    }).catch();
  };

  const onCancel = () => {
    // 先清除form表单
    formRef.current!.resetFields();
    const { onHandlerCancel } = props;
    if (onHandlerCancel) {
      onHandlerCancel();
    }
  }

  const { colon, modalTitle, modalWidth, modalVisible, loading } = props;
  // const form = Form.useForm;
  // const { resetFields } = form;
  const formItemLayout = modalFormItemLayout;

  return(
    <Modal
      title={modalTitle}
      destroyOnClose
      maskClosable={false}
      width={modalWidth}
      open={modalVisible}
      confirmLoading={loading}
      onOk={onOk}
      onCancel={onCancel}>
      <Form layout={formLayout} ref={formRef}>
        <Row>
          <Col span={12}>
            <FormItem label='参数名称' name='paramName' {...formItemLayout} colon={colon}
              rules={[
                { max: 20, message: '参数名称最多允许输入20个字符' },
                { required: true, message: '参数名称必输' }
              ]}
            >
              <Input/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label='参数键名' name='paramKey' {...formItemLayout} colon={colon}
              rules={[
                { max: 20, message: '参数键名最多允许输入20个字符' },
                { required: true, message: '参数键名必输' },
                { pattern: new RegExp(/^[A-Za-z][A-Za-z0-9\\._]{1,19}$/, "g"), message: '参数键名只能以字母开头，由A-Za-z0-9._组成，最大长度为20' }
              ]}
            >
              <Input/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label='参数键值' name='paramValue' {...formItemLayout} colon={colon}
              rules={[
                { max: 20, message: '参数键值最多允许输入20个字符' },
                { required: true, message: '参数键值必输' },
              ]}
            >
              <Input/>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <FormItem label='参数键值描述' name='paramValueDesc' {...maxModalFormItemLayout} colon={colon}
              rules={[
                { max: 30, message: '参数键值描述最多允许输入30个字符' },
                { required: true, message: '参数键值描述必输' }
              ]}
            >
              <Input />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}

export default AddParamModal
